<!DOCTYPE html>
<html>
<head>
<title>CSS Animation: 3 moving hearts!</title>
<style>
@keyframes movingheart{
0%  {width:100px;height:100px;left:0px;top:0px;opacity:0.2} 
25%  {width:200px;height:200px;left:100px;top:100px;opacity:0.4；transform:rotate(30deg);}
75%  {width:100px;height:100px;left:300px;top:0px;opacity:0.8;transform:rotate(60deg);} 
100%  {width:100px;height:100px;left:0px;top:0px;opacity:0.2;tranform:rotate(90deg);} 
}

img.movingheart{
	position:absolute;
	width:100px;
    height:100px;
    animation-name:movingheart;
    animation-duration:6s;
    animation-iteration-count:infinite;
    animation-direction:normal;
}
img.delay1{
    animation-delay:2s;
}

img.delay2{
    animation-delay:4s;
}

</style>
</head>
<body>
<img class="movingheart" 
src="heart-red.png">
<img class="movingheart delay1" 
src="heart-orange.png">
<img class="movingheart delay2" 
src="heart-pink.png">
</body>
</html>
